<%@ page import="cleanstarxchange.server.*"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.text.DecimalFormat"%>
<%@ page import="java.util.Collections"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<%
		//initializing datastore object for connection to google datastore
		DataStore ds = new DataStore();
		//getting user id which was passed on from the previous page
		Integer uid = Integer.parseInt( request.getParameter( "uid" ) );
		//gettin all the users from datastore and sort it by total asset value
		ArrayList<User> users = ds.getUser();
		Collections.sort(users);
		//connection to datastore closed
		ds.close();
	%>

	<script language="javascript">
	<!--
	function moveToHome()
	{
   		var frm = document.frm;
	   	frm.action = "index.jsp?uid=<%=uid%>";
   		frm.submit();
	}

	function moveToPF()
	{
   		var frm = document.frm;
	   	frm.action = "portfolio.jsp?uid=<%=uid%>";
   		frm.submit();
	}
	function moveToUpdate()
	{
   		var frm = document.frm;
	   	frm.action = "update.jsp?uid=<%=uid%>&updateid=1";
   		frm.submit();
	}
	//-->
	</script>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Star XChange</title>
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
		
		<!--[if IE]>
		<style type="text/css"> 
		/* place css fixes for all versions of IE in this conditional comment */
		.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
		.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
		/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
		</style>
		<![endif]-->
	</head>

	<body class="twoColElsLtHdr">
	<!-- container wraps the whole contents of the webpage -->
	<div id="container">
  		<!-- header contains the logo of our application which links to index.jsp page -->
  		<div id="header"><a href="index.jsp?uid=<%=uid%>"><img src="media/logo.jpg"/></a>
  		<!-- end #header -->
  		</div>
  		<!-- sidebar contains the menu to navigate the application -->
  		<div id="sidebar1">
   			<ul class="sidenav">
				<li>
                	<a href="portfolio.jsp?uid=<%=uid%>" title="My Portfolio">My Portfolio
                    <span>See how rich I am</span>
                    </a>
                    
                </li>
			    <li>
                	<a href="stocklist.jsp?uid=<%=uid%>" title="Stocks">Stocks
                    <span>See the market flow</span>
                    </a>
                </li>
				<li>
                	<a href="rank.jsp?uid=<%=uid%>" title="Rank">Rank
                    <span>Who is the winner now</span>
                    </a>
                </li>
				<li>
                	<a href="howtoplay.jsp?uid=<%=uid%>" title="HowToPlay">How To Play
                    <span>Learn how to play the game</span>
                    </a>
                </li>
			</ul>
    	<!-- end #sidebar1 -->
    	</div>
  		<!-- mainContent contains the rank table of all users -->
  		<div id="mainContent">
  		  <div id="shortcut">
    			<form name="frm" method="post">
				<!-- a button links to index page -->
				<input type="button" name="btregister" value = "Home" onClick="moveToHome();">
				<!-- a button links to portfolio page -->
				<input type="button" name="btregister" value = "Portfolio" onClick="moveToPF();">
				<!-- the update button which is only visible by developers
					 it will be removed once automatic update is done
				 -->
				<% if ( uid==713865194 || uid==21014218 || uid==783920693 || uid==514766462 ){ %>
				<input type="button" name="btregister" value = "Update Now" onClick="moveToUpdate();">
				<% } %>
				</form>
    		</div>
    		<h1> Rank Main </h1>
    		<div id="shortcut">
    			<!-- ranking table -->
    			<table width="95%" border="0" cellspacing="2" cellpadding="2">
  					<tr>
    					<th scope="col">Rank</th>
    					<th scope="col">Name</th>
    					<th scope="col">Net Worth</th>
    					<th scope="col">U/D</th>
  					</tr>
  					<%int i;
  						//table size will be the number of the users
  						for(i=1; i<=users.size(); i++ ){ 
  						int j = i-1;
  						
  						//getting the user
  						User current = users.get(j);
  						
  						//calculating the gain and loss by comparing previous total asset value
  						//with the current total asset value
  						//and display it in % form
  						double prevAssetValue = current.getPrevAssetValue();
  						double assetValue = current.getAssetValue();
  						double percent = ((assetValue-prevAssetValue)/prevAssetValue)*100;
  						DecimalFormat twoDForm = new DecimalFormat("#.##");
  						percent = Double.valueOf(twoDForm.format(percent));
  						assetValue = Double.valueOf(twoDForm.format(assetValue));
  						
  						//setting the different color depending on gain/loss
  						String color;
  						if( percent > 0 ) color = "#00ff00";
						else if( percent < 0 ) color = "#ff0000";
						else color = "#000000";
  					%>
  					<tr>
    			
    					<!-- rank! -->
    					<td><%=i %></td>
    					<!-- name of the user which links to the portfolio page of that user -->
    					<td><a href="userprofile.jsp?uid=<%=uid%>&viewid=<%=current.getUserID() %>"><%=current.getFirstName()%> <%=current.getLastName()%></a></td>
    					<!-- total asset value -->
    					<td>$<%=assetValue%></td>
    					<!-- the gain/loss of the user -->
    					<td><span style="color:<%=color%>"><%=percent %>%</span></td>
  					</tr>
  					<%}
  					%>
  					
    		</table>
    		</div>
    		
    		<!-- end #mainContent -->
    	</div>
		
		<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
		<br class="clearfloat" />
   		
   		<div id="footer">
    		<p>Ranks will be here</p>
  		<!-- end #footer -->
  		</div>
  		
	<!-- end #container -->
	</div>
	
	</body>
</html>
